<template>
  <div class="about">
    <h3>Vue项目中实现用户登录及token验证</h3>
    <a
      href="https://www.cnblogs.com/web-record/p/9876916.html"
      target="_blank"
      rel="noopener noreferrer"
      >点击查看原文</a
    >
    <p>在前后端完全分离的情况下，Vue项目中实现token验证大致思路如下：</p>
    <p>1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码</p>
    <p>2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token</p>
    <p>3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面</p>
    <p>
      4、前端每次跳转路由，就判断 localStroage 中有无
      token，没有就跳转到登录页面，有则跳转到对应路由页面
    </p>

    <p>5、每次调后端接口，都要在请求头中加token</p>
    <p>
      6、后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（例如：token过期）就返回401，请求头中没有token也返回401
    </p>
    <p>7、如果前端拿到状态码为401，就清除token信息并跳转到登录页面</p>
    <br />
    <h3>使用Mock制造假数据</h3>
    <br />

    <el-table :data="list" style="width: 100%">
      <el-table-column prop="name" label="名字" width="180"></el-table-column>
      <el-table-column prop="cfirst" label="姓氏" width="180"></el-table-column>
      <el-table-column prop="cfirst" label="姓名" width="180">
        <template slot-scope="scope">
          <!-- 拼接2个字段，合并成姓名 -->
          {{ scope.row.cfirst }}{{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column
        prop="natural"
        label="年龄"
        width="180"
      ></el-table-column>
      <el-table-column prop="data" label="日期"></el-table-column>
      <el-table-column prop="province" label="省份"></el-table-column>
      <el-table-column prop="city" label="城市"></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      other: []
    };
  },
  mounted() {
    // 初始化数据
    this.getList();
  },
  methods: {
    getList() {
      this.$axios
        .get("/api/data")
        .then(res => {
          console.log(res.data);
          this.list = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
<style scoped></style>
